<template>
  <main class="c-topic">
    <div v-if="media">
      <section class="c-topic_item" >
        <div class="c-topic_brand D3media" :style="mediaBigPic">
          <img :src="media.bigImage" class= "toptic-media " >
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="recommend-play_icon"></a>
        </div>
      </section>
      <section class="alone-btn_wrapper">
        <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="button along_btn">前往APP观看全部视频</a>
      </section>
      <section class="mes-box"> 
        <h3 class="mes-box_title js-mesbox_title" >{{media.title}}</h3>
        <p class="mes-box_labels">
            <span class="playcount"><i class="icon icon-playcount"></i>{{media.playCount}}次播放</span>
            <span class="label" v-for="tag in media.tags" >#{{tag}}</span>
        </p>         
        <hr class="horizontal-line_gray" />
        <article class="mes-box_mes js-mesbox_mes">
          {{media.intro}}
        </article>
      </section>
      <series-tv v-if="showSeriesTv" :media="media"></series-tv>      
    </div>
    <div v-else class="err-tip-contain">
      <div class="spinner" v-if="loading"></div>        
      <p v-else>地址错误，请访问正确地址</p>
    </div>
    <global-footer></global-footer>
  </main>
</template>
<script>
  import tv from 'services/tv';
  import GlobalFooter from 'components/global-footer';
  import SeriesTv from 'pages/components/series-tv';
  import { sharewx } from 'services/sharewx';

  export default {
    components: { GlobalFooter, SeriesTv },
    data () {
      return {
        media: null,
        hideIntro: true,
        showHideIntro: true,
        mediaBigPic: {
          backgroundImage: ''
        },
        type: '',
        showSeriesTv: false,
        loading: true
      };
    },
    computed: {
      byteSize () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        return (contentWidth / 1080 * 36);
      }
    },
    mounted () {
      this.mesBox = this.getMesbox();
      tv.get().then((data) => {
        this.loading = false;
        if (data) {
          this.media = data;
          if (data.type.trim() === 'tv' && +data.totalEpisode > 0) {
            this.showSeriesTv = true;
          }
          if (data.intro.length > Math.floor((this.mesBox / this.byteSize) * 6)) {
            this.media.intro = data.intro.slice(0, Math.floor((this.mesBox / this.byteSize) * 6) - 12).concat('...');
          }
          this.mediaBigPic.backgroundImage = `url(${data.bigImage})`;
          document.title = `VR视频 | ${data.title}`;
          document.head.querySelector('meta[name="description"]').content = data.intro;
          sharewx({
            title: data.title,
            imgUrl: data.smallImage,
            desc: data.intro
          });
        } else {
          this.media = null;
        }
      });
    },
    methods: {
      getMesbox () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const mesbox = document.querySelector('.js-mesbox_mes');
        if (mesbox) {
          return mesbox.clientWidth;
        }
        return contentWidth;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .alone-btn_wrapper {    
    padding: .28rem 0;
    text-align: center;
    font-size: 0;
    background-color: #fff;
  }
  .along_btn {
    width: 90%;
    color: white;
    background-color: #34b1fe;
    padding: .7em 1.35em .6em;
    text-align: center;
    font-size: .42rem;
    border-radius: .1rem;    
  }
</style>
